<template>
      <div id="prize">
          <!-- 头部 -->
          <my-header fixed title='邀请有奖' v-goTop:click='true'>
              <a class="back-black" slot='left' @click='$router.go(-1)'></a>
              <a class="p-prize" slot='right' @click='$refs.share.toggle()'></a>
          </my-header>
          <!-- 正文 -->
          <div class="content" :class="{isIOS: $store.state.device == 'ios'}">
              <div class="container" v-swiper:swiperRight='true'>
                  <div class="prize_box">
                       <div class="prize_box_num">
                         <span>您的邀请码</span>
                         <span class="num">DT2568</span>
                       </div>
                       <div class="prize_box_copy">
                         <span>复制</span>
                       </div>
                       <div class="bg_line"></div>
                       <div class="prize_box_code">
                          <img src="~@/assets/img/p_code.png">
                       </div>
                       <div class="prize_box_text">
                         扫码下载链看
                       </div>
                  </div>
              </div>
          </div>
          <!-- 分享组件 -->
          <my-share :json='currentArticle' ref="share"></my-share>
          <!-- 子页面视图 -->
          <router-view></router-view>
      </div>
</template>
<script>
import myShare from '../../../detail/components/share'
export default {
    name: 'prize',
    components: { myShare },
    data () {
        return {
          currentArticle: ''
        }
    },
    watch: {

    }
}
</script>
<style lang='stylus'>
#prize {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    overflow: hidden;
    z-index: 1000;
    .content {
        position: relative;
        background: #f6f7fa;
    }
    .prize_box {
      color: #f34e4e;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      padding-top: 50%;
      .prize_box_num {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .num {
          font-size: 40px;
          font-weight: 400;
          padding-top: 20px;
        }
      }
      .prize_box_copy{
         color: #fff;
         text-align: center;
         width: 100%;
         height: 31px;
         line-height: 31px;
         margin-top: 30px;
         span {
           background: #f34e4e;
           width: 60px;
           padding: 5px 20px;
           border-radius: 5px;
         }
      }
      .bg_line {
          border: 1px dashed #f34e4e;
          margin: 0 10%;
          margin-top: 25px;
      }
      .prize_box_code {
        text-align: center;
        margin-top: 20px;
        img {
           height: 145px;
           width: 145px;
        }
      }
      .prize_box_text {
        color: #8d8d8d;
        text-align: center;
      }
    }
}
</style>
<style>
  #prize .container {
    width: 100%;
    background: url(~@/assets/img/p_prize_bg.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
</style>
